<template>
  <ContentField>
    <div class="row">
      <div class="col-3">
        <UserProfileInfo :user="user" @follow="follow" @unfollow="unfollow"/>
        <UserProfileEdit @submit_a_post="submit_a_post" />
      </div>
      <div class="col-9">
        <UserProfilePosts :post_list="post_list" />
      </div>
    </div>
  </ContentField>
</template>

<script>
import ContentField from '@/components/ContentField.vue';
import UserProfileInfo from '@/components/UserProfileInfo.vue';
import UserProfilePosts from '@/components/UserProfilePosts.vue';
import UserProfileEdit from '@/components/UserProfileEdit.vue';
import { reactive } from 'vue';
import { useRoute } from 'vue-router';

export default {
  name: 'UserProfileView',
  components: {
    ContentField,
    UserProfileInfo,
    UserProfilePosts,
    UserProfileEdit,
  },
  setup() {
    const route = useRoute();
    const userId = route.params.userId;

    console.log(userId);
    let user = reactive({
      id: 1,
      username: 'lky',
      followerCount: 0,
      is_followed: false,
    });

    let post_list = reactive({
      count: 4,
      posts: [
        {
          id: 1,
          user_id: 2,
          content: 'C++很有趣！'
        },
        {
          id: 2,
          user_id: 2,
          content: 'Python很简单！'
        },
        {
          id: 3,
          user_id: 2,
          content: '算法很难！'
        },
        {
          id: 4,
          user_id: 2,
          content: '写项目很累！'
        },
      ],      

    });

    const follow = () => {
      if(user.is_followed) return;
      user.is_followed = true;
      user.followerCount++;
    };

    const unfollow = () => {
      if(!user.is_followed) return;
      user.is_followed = false;
      user.followerCount--;
    };

    const submit_a_post = (content) => {
      post_list.posts.unshift({
        id: post_list.count + 1,
        user_id: 2,
        content: content.value,
      });
    }

    return {
      user,
      post_list,
      follow,
      unfollow,
      submit_a_post
    }
  },

  
}
</script>

<style scoped>

</style>